.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-18px'},
.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-18px'}:before {
  font-size: 18px;
}

.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-24px'},
.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-24px'}:before {
  font-size: 24px;
}

.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-36px'},
.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-36px'}:before {
  font-size: 36px;
}

.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-48px'},
.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-48px'}:before {
  font-size: 48px;
}

.#{$mdi-css-prefix}-dark {
  color: rgba(0, 0, 0, 0.54);
}

.#{$mdi-css-prefix}-dark.mdi-inactive {
  color: rgba(0, 0, 0, 0.26);
}

.#{$mdi-css-prefix}-light {
  color: rgba(255, 255, 255, 1);
}

.#{$mdi-css-prefix}-light.mdi-inactive {
  color: rgba(255, 255, 255, 0.3);
}

$degrees: 45 90 135 180 225 270 315;
@each $degree in $degrees {
  .#{$mdi-css-prefix}-rotate-#{$degree} {
    -webkit-transform: rotate(#{$degree}deg);
    -ms-transform: rotate(#{$degree}deg);
    transform: rotate(#{$degree}deg);
  }
}

.#{$mdi-css-prefix}-flip-horizontal {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.#{$mdi-css-prefix}-flip-vertical {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}